<template>
 <div class="home-box">
    <Head-vue></Head-vue>
    <div class="box">
      <Banner></Banner>
      <Nav-vue></Nav-vue>
      <Second-kill></Second-kill>
      <Detail></Detail>
    </div>
    <Footer></Footer>
 </div>
</template>

<script>
import HeadVue from '@/components/Head.vue';
import Banner from '@/components/Banner.vue';
import NavVue from '@/components/Nav.vue';
import SecondKill from '@/components/SecondKill.vue';
import Detail from '@/components/Detail.vue';
import Footer from '@/components/Footer.vue';

export default {
   name:"home-vue",
   components:{
    HeadVue,
    Banner,
    NavVue,
    SecondKill,
    Detail,
    Footer
   }
}
</script>

<style>
.home-box{
    height: 100%;
    display: flex;
    flex-direction: column;
}
 .box{
  flex: 1;
  overflow: auto;
}
</style>